<template>
  <div class="page_box">
    <TitleCom :title="title" />
    <div class="content">
      <Treeselect
        v-model="value"
        :options="deptOptions"
        :normalizer="normalizer"
        placeholder="选择上级部门"
      />
    </div>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "vueTreeselect",
  data() {
    return {
      value: "",
      deptOptions: [
        {
          id: "a",
          label: "a",
          children: [
            {
              id: "aa",
              label: "aa",
            },
            {
              id: "ab",
              label: "ab",
            },
          ],
        },
        {
          id: "b",
          label: "b",
        },
        {
          id: "c",
          label: "c",
        },
      ],
    };
  },
  methods: {
    // 这里相当于改名称
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.label,
        children: node.children,
      };
    },
  },
  components: {
    Treeselect,
  },
  computed: {
    title() {
      return this.$route.query.title || "未设置";
    },
  },
};
</script>

<style lang="scss" scoped>
.page_box {
  .title {
    font-size: 24px;
  }
  .content {
    margin: 0 auto;
    padding: 20px;
    width: 400px;
    border: 1px solid #ededed;
  }
}
</style>
